<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-elements</title>
    <style>
        p {
            border: 1px solid black;
            padding: 0.5em;
        }

        .quote::before {
            content: open-quote;
            font-size: 2em;
        }
        .quote::after {
            content: close-quote;
            font-size: 2em;
        }

        a.heart::before {
            content: url("custom-list-item.png");
        }
        a.page::before {
            content: url("custom-list-item-2.png");
        }
        a.face::before {
            content: url("background-repeat.png") / ":^)";
        }

        .inline:hover::before {
            background: yellow;
        }
        .inline::before {
            content: "This sentence is first, and will turn yellow if you hover the paragraph.";
            color: blue;
        }
        .inline::after {
            content: "This sentence is last, still in the same paragraph.";
            color: red;
        }

        .block::before {
            display: block;
            content: "This should appear as a block, first.";
            color: blue;
        }
        .block::after {
            display: block;
            content: "This should appear as a block, last.";
            color: red;
        }

        .fancy-list li::marker {
            color: green;
        }
    </style>
</head>
<body>
    <h1>::before and ::after</h1>
    <p class="inline">There should be a sentence before this, and one after, forming a single paragraph.</p>
    <p class="block">There should be a sentence before this, and one after, each as its own block.</p>

    <ul class="fancy-list">
        <li>This</li>
        <li>Is</li>
        <li>A</li>
        <li>List</li>
        <li>With</li>
        <li>Green</li>
        <li>Markers</li>
    </ul>

    <p class="quote">This should have chonky quotation marks.</p>

    <h2>FIXME: These do not work yet</h2>
    <p>
        This is some text. Each <a href="#" class="heart">link</a> should have a little <a href="#" class="page">icon</a> before it, <a href="#" class="face">and this one has a tooltip too.</a>
    </p>
</body>
</html>
